<template>
  <el-page-header @back="goBack" style="margin: 20px 50px">
    <template #content>
      <span class="text-large font-600 mr-3">
        {{ product.name }}-商品详细页
      </span>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-button type="primary" class="ml-2" @click="ShoppingCart"
          >购物车</el-button
        >
      </div>
    </template>
  </el-page-header>
  <el-container class="container">
    <el-main>
      <div class="product-details">
        <div class="image-container">
          <el-image :src="$apiImg+product.image" style="width: 500px;height: 500px;"></el-image>
        </div>
        <div class="info">
          <el-form
            ref="ruleFormRef"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="name">{{
              product.name
            }}</el-form-item>
            <el-form-item label="商品价格" prop="price">{{
              product.price
            }}</el-form-item>
            <el-form-item label="商品介绍" prop="description">{{
              product.description
            }}</el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addToCart"
                >加入购物车</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { detailApi } from '@/api/list'
import { cartaddApi } from '@/api/shoppingCart'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  components: {},
  setup() {
    const data = reactive({
      product: {},
      type: {},
      cart: {
        username: '',
        productId: ''
      }
    })
    const route = useRoute()
    const router = useRouter()
    const detail = () => {
      data.type.key = route.params.id
      detailApi(data.type).then((res) => {
        if (res.data) {
        data.product = res.data
        }
      })
    }

    const goBack = () => {
      window.history.back()
    }

    const ShoppingCart = () => {
      router.push({
        path: '/shopping-cart'
      })
    }

    const store = useStore()
    const addToCart = () => {
      data.cart.username = store.state.uInfo.userInfo.username
      data.cart.productId = data.product.id
      data.cart.quantity = 1
      cartaddApi(data.cart).then((res) => {
        if (res) {
          router.push({
            path: '/shopping-cart'
          })
        }
      })
    }

    const buyNow = () => {
      // 购买逻辑
    }

    detail()

    return { ...toRefs(data), goBack, addToCart, buyNow, ShoppingCart }
  },
  methods: {}
}
</script>

<style scoped>
.container {
  margin: 0 50px;
}

.product-details {
  display: flex;
  flex-direction: row;
}

.image-container {
  width: 60%;
  max-width: 600px;
}

.info {
  width: 40%;
  padding: 10px 50px;
}

.actions {
  display: flex;

  align-items: center;
}
</style>
